<template>
  <section>
    <!--工具条-->
    <el-form :inline="true" :model="searchForm" class="toolbar">
      <el-form-item label="组织名称">
        <el-input v-model="searchForm.orginzerName"></el-input>
      </el-form-item>
      <el-form-item label="参与状态">
        <el-select v-model="searchForm.joinStatus" placeholder="请选择" clearable>
          <el-option v-for="item in joinStatus" :label="item.name" :key="item.code" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
  <el-form-item>
    <el-button @click="search" type="info">查询</el-button>
  </el-form-item>
</el-form>
    <div class="divid-line"></div>
<!--列表-->
<template>
  <el-table :data="gridData" highlight-current-row v-loading="gridLoading" class="grid">
    <el-table-column label="序号" type="index" width="100">
    </el-table-column>
   <el-table-column label="组织名称" prop="realName" width="220" sortable>
   </el-table-column>
   <el-table-column label="组织地址" prop="address" width="220" sortable>
   </el-table-column>
  <el-table-column label="组织口号" prop="slogan" width="400" sortable>
</el-table-column>
    <el-table-column label="是否已参加" prop="joinStatus" sortable>
      <template scope="scope">
        <el-tag :type="scope.row.joinStatus == 1 ? 'sucess' : 'danger'">
          {{getStatus(scope.row.joinStatus)}}
        </el-tag>
      </template>

    </el-table-column>
    <el-table-column label="操作" prop="remark">
      <template scope="scope">
        <el-button size="small" @click="addOrginzer(scope.row)" type="primary" v-if="scope.row.joinStatus != 1" :disabled="attendButton">参加</el-button>
        <el-button size="small" type="warning" @click="deleteActivity(scope.row)" v-if="scope.row.joinStatus == 1">取消参加</el-button>
      </template>
    </el-table-column>
</el-table>

</template>
</section>
</template>
<script>
import enums from '../../common/Enum'
import DataUtil from '../../common/dataUtil'
import Config from '../../common/config'
export default {
  data () {
    return {
      searchForm:{
        orginzerName:'',
        joinStatus:'',
      },

      joinStatus:[{
        code: 1,
        name:'参加',
      },{
        code: 2,
        name:'未参加'
      }],
      attendButton : false,
      gridLoading: true,
      gridData:[],
      acitvityVisible: false,
      activityDialogLoading: false
    }
  },
  methods: {
    getActivitySubject() {

        this.$http.post('activity/listActivitySubject',{}).then(response => {
            if (response.body.code == 1) {
                this.activitySubject = response.body.data;
            }
        });
   },
  getdate(dates) {
    if(!dates){
      return '';
    }
    var myDate = new Date(dates);
    let minute=myDate.getMinutes();
    if(minute<10){
      minute="0"+minute;
    }
    let seconds=myDate.getSeconds()
    if(seconds<10){
      seconds="0"+seconds;
    }
    return myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+minute+":"+seconds
  },
   getStatus(type) {

     let re = '未参加';
     this.joinStatus.forEach(obj => {
      if (obj.code == type) {
        re = obj.name;
        return re;
      }
    });
     return re;
   },
     search() {
      this.bindGrid()
    },
    activityBack() {
      this.acitvityVisible = false;
      this.activityDialogLoading = false;
    },
    bindGrid() {
      this.gridLoading = true;
        // let _data = Object.assign(this.searchForm);
        let _data = Object.assign({
          userId: DataUtil.id(),
        }, this.searchForm);
        this.$http.post('orginzer/listMyOrginzer', _data).then(response => {
          if (1 == response.body.code) {
            this.gridLoading = false;
            this.gridData = response.body.data;
          } else {
            this.$message.error(body.message);
          }
        }).catch((e) =>{
          this.gridLoading = false;
        })
      },
    addOrginzer(row) {
      this.attendButton = true;
      let _data = {
          "orginzerId" : row.orginzerId,
          "userId": DataUtil.id()
      }
      this.$http.post('orginzer/joinOrginzer', _data).then(response => {
        if (response.body.code == 1) {
          this.$message({
            type: 'success',
            message: '加入组织成功!'
          });
          this.bindGrid();
          this.attendButton = false;
        } else {
          this.$message.error(response.body.message);
        }
      })
    },
    deleteActivity(row) {
      this.$confirm('此操作会退出该组织, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('orginzer/outOrginzer',{"orginzerId" : row.orginzerId, "userId": DataUtil.id()})
          .then(response => {
          if (response.body.code == 1) {
            this.$message({
              type: 'success',
              message: '退出组织成功!'
            });
            this.bindGrid();
          } else {
              this.$message.error(response.body.message);
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出组织'
        });
      });
    }
    },
    mounted: function () {
        this.bindGrid();
}
}
</script>
